<template>
  <div class="rule dfsp">
    <div class="rule_list">
      <div class="title size16">{{ t('notice') }}</div>
      <div class="list" v-loading="loading">
        <div
          class="item dfsp"
          v-for="(item, index) in list"
          :class="item.id == ruleId ? 'acitem' : 'defaultitem'"
          @click="ruleTap(item.id)"
          :key="index"
        >
          <div class="notice-item">
            <div class="content">
              <div :class="['title-type', getTitleStyle(item.titleType)]">
                {{ item.titleType }}
              </div>
              <div class="item-content">
                <div class="itemL">
                  <p class="text1 sizefw">{{ item.content }}</p>
                  <text class="time">{{ item.create_time }}</text>
                </div>
              </div>
            </div>
            <div class="item-icon">
              <img
                :src="
                  item.id == ruleId
                    ? 'src/style/img/notice/right-icon.png'
                    : 'src/style/img/notice/right-icon-default.png'
                "
                alt=""
              />
            </div>
          </div>
          <!-- <div class="itemL">
            <p class="text1 sizefw size16">{{ item.title }}</p>
            <text class="size12">{{ item.create_time }}</text>
          </div> -->
        </div>
      </div>
      <div class="pagination">
        <el-pagination
          v-model:current-page="page.page"
          v-model:page-size="page.page_size"
          :page-sizes="[10, 20, 30, 40]"
          :small="small"
          :disabled="disabled"
          :background="background"
          layout="total,sizes, prev, pager, next"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <div class="rule_detail" v-loading="loading">
      <div class="select-lang">
        <el-dropdown class="my_dropdown">
          <img class="lang" src="@/style/img/login/lang.png" alt="" />
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item
                v-for="(item, index) in LangList"
                :key="index"
                @click.native="toggle(item.code)"
              >
                {{ item.title }}</el-dropdown-item
              >
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
      <div class="detail-item">
        <div class="size16 sizefw tac">
          <div>
            {{ noticeDetail.title }}
          </div>
          <div>
            <text class="tip">{{ noticeDetail.create_time }}</text>
          </div>
        </div>
        <el-divider content-position="left"> </el-divider>
        <div class="content" v-html="noticeDetail.content"></div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
import { useStore } from 'vuex'
const store = useStore() //vuex
import { ArrowRight } from '@element-plus/icons-vue'
import { reactive, ref, onMounted, getCurrentInstance } from 'vue'
const { proxy } = getCurrentInstance()
const loading = ref(false) //加载
const ruleId = ref(1)

const small = ref(true)
const background = ref(false)
const disabled = ref(false)

const ruleList = []
const list = ref([])
const total = ref(0)
const page = reactive({
  page: 1,
  page_size: 10,
  device: 5,
})

const LangList = reactive([
  {
    title: t('zh'),
    code: 'zh',
  },
  {
    title: t('zhtw'),
    code: 'zhtw',
  },
  // {
  // 	title: t('nogu'),
  // 	code: 'nogu'
  // },
])
import Cookies from 'js-cookie'
const { locale: i18nLanguage } = useI18n()
const toggle = (languageKey) => {
  i18nLanguage.value = languageKey
  store.state.Lang = languageKey
  Cookies.set('Lang', languageKey)
  // setToken("Lang", languageKey)
  location.reload()
}
// 页面渲染
onMounted(() => {
  GetRulelist()
})
// 标题颜色
const getTitleStyle = (title) => {
  if (title === '重要公告') {
    return 'notice-style'
  } else if (title === '系統維護' || title === '系統更新') {
    return 'system-style'
  } else if (title === '活動資訊') {
    return 'info-style'
  }
}
//
const ruleTap = (id) => {
  ruleId.value = id
  GetNoticedetail()
}
// 获取详情
const noticeDetail = ref({})
const GetNoticedetail = () => {
  loading.value = true
  proxy
    .$post('/article/articleapi/noticedetail', {
      id: ruleId.value,
    })
    .then((res) => {
      noticeDetail.value = res.data
      loading.value = false
    })
    .catch((res) => {
      loading.value = false
    })
}
// 获取列表
const GetRulelist = () => {
  loading.value = true
  proxy
    .$post('/article/Articleapi/noticelist', page)
    .then((res) => {
      let Data = res.data
      Data.forEach((item) => {
        if (item && item.title) {
          item.titleType = item.title.split('】')[0].replace('【', '')
          item.content = item.title.split('】')[1]
        }
      })
      total.value = Number(res.total)
      list.value = Data
      console.log(Data)
      if (Data.length > 0) {
        ruleId.value = Data[0].id
        GetNoticedetail()
      }
    })
    .catch((res) => {
      loading.value = false
    })
}
//
const handleSizeChange = (val) => {
  page.page_size = val
  GetRulelist()
}
const handleCurrentChange = (val) => {
  page.page = val
  GetRulelist()
}
</script>

<style scoped lang="scss">
@import '../../style/scss/notice';
</style>
